import React, {Component} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import getStyles from '../../style/styles';

let styles={};
export default class StatisticsScene extends Component {


    constructor(props){
		super(props);
	}

	componentDidMount() {
    	this.props.navigation.setOptions({
			title: '汇总统计',
		})
	}

	gotoPage = (page) => {
		this.props.navigation.navigate(page, {})
	}

    render() {
		styles=getStyles();
		return (
			<View style={style.container}>
				<View style={style.items}>
					<TouchableOpacity
							style={style.saveBtn}
							underlayColor='transparent'
							onPress={() => {
									this.gotoPage('NoReadScene')
							}}>
						<Text style={styles.saveText}>未抄表统计</Text>
					</TouchableOpacity>
				</View>
				<View style={style.items}>
					<TouchableOpacity
							style={style.saveBtn}
							underlayColor='transparent'
							onPress={() => {
									this.gotoPage('HasReadScene')
							}}>
						<Text style={styles.saveText}>已抄表统计</Text>
					</TouchableOpacity>
				</View>
				<View style={style.items}>
					<TouchableOpacity
							style={style.saveBtn}
							underlayColor='transparent'
							onPress={() => {
									this.gotoPage('PaidScene')
							}}>
						<Text style={styles.saveText}>已缴费统计</Text>
					</TouchableOpacity>
				</View>
				<View style={style.items}>
					<TouchableOpacity
							style={style.saveBtn}
							underlayColor='transparent'
							onPress={() => {
									this.gotoPage('ArrearsScene')
							}}>
						<Text style={styles.saveText}>欠费统计</Text>
					</TouchableOpacity>
				</View>
			</View>
		);
    }
}

const style = StyleSheet.create({
	container: {
        flex: 1,
    },
	items: {
        alignItems: 'center',
        margin: 5
    },
	saveBtn: {
        height: 35,
		width:210,
        backgroundColor: 'green',
        margin: 10,
        justifyContent: 'center',
		borderRadius:5
    },
});
